<template>
  <van-loading v-if="loading" size="24px" vertical>加载中...</van-loading>

  <!-- 背景层 -->
  <div class="background-layer" :style="getBackgroundStyle">
    <ParticleBackground />
  </div>

  <!-- 内容层 -->
  <div class="content-layer">
    <RouterView />
  </div>
</template>
<script setup lang="ts">
import { computed, onMounted, ref } from "vue";
import request from "./utils/http";
import type { BanquetOrder } from "./types/banquet";
import { useAppStore } from "./stores";
import ParticleBackground from "@/components/particle/index.vue";

const loading = ref(false);
// 订单信息
const order = ref<BanquetOrder>({} as BanquetOrder);

/**
 * 加载订单数据
 */
const loadDate = async () => {
  loading.value = true;
  const { data } = await request<BanquetOrder>({
    url: `/api/weapp/banquet/order`,
    method: "GET",
  });
  const store = useAppStore();
  store.setOrder(data);
  order.value = data;
  loading.value = false;
};

/**
 * 计算背景样式
 */
const getBackgroundStyle = computed(() => {
  if (order.value.bgConfig) {
    const bgConfig = JSON.parse(order.value.bgConfig);
    if (bgConfig.type === "solid") {
      return {
        background: bgConfig.color,
      };
    } else {
      const { direction, startColor, endColor, startPercent } = bgConfig.gradient;
      if (direction === "radial") {
        return {
          background: `radial-gradient(circle, ${startColor} ${startPercent}%, ${endColor} 100%)`,
        };
      } else {
        return {
          background: `linear-gradient(${direction}, ${startColor} ${startPercent}%, ${endColor} 100%)`,
        };
      }
    }
  } else {
    return {
      background: "linear-gradient(135deg, #1a272e 0%, #0f0f0f 100%)",
    };
  }
});

onMounted(() => {
  console.log("app mounted");
  loadDate();
});
</script>

<style lang="less" scoped>
.background-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.content-layer {
  position: relative;
  min-height: 100vh;
}
</style>
